<img src="images/flash_camo_logo_white.gif" alt="flash_camo_logo_white" width="452" height="58"/>

<p><a href="http://code.google.com/p/flash-camouflage/" target="_blank">Flash Camo</a> (for short) is a graphics framework that allows AS 3 applications to be easily skinned from pngs, jpgs, or gifs. The framework is broken down into 3 core areas: <b>Decals</b>, the <b>CSS Parser</b>, and the <b>CamoDisplay</b>. These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo's modular approach, you can use as little or as much of the framework as you want. The entire framework is under 40k.</p>

<p><em>Flash Camo is open source (under the MIT License), is compatible with FlashPlayer 9/10, Flex 3, and AIR. It can be built with the open source Flex SKD compiler or used in Flash CS 3/4 as a SWC.</em></p>

<p>In this introduction we are going to use version 2.2 beta. You can check it out from Google Code here:</p>

<pre>
https://flash-camouflage.googlecode.com/svn/tags/FlashCamo_2.2.0_beta
</pre>

<br/>

<p>I will introduce each of the major systems of the framework and at the end of each part there is a demo you can run to see the framework feature in action. Lets get started!</p>

<h2>Decals and Decal Sheets</h2>
<p>The main feature of the framework is the DecalSheet system (located in the <tt>camo.core.decal</tt> package); made up of the <b>DecalSheetManager</b>, <b>DecalSheet</b> and <b>Decal</b> classes. The DecalSheet concept was inspired by the decals you would get with model airplanes. Each model kit would contain sheets of graphics and on each sheet you could peal off a decal and place it on the model. Camo's version of the DecalSheet allow you to load in external images, cut out decals, and skin your application with the Decals. The following diagram will help when explaining the relationship between the three classes:</p>

<p align="center">
<img src="images/decalsheet_manager.jpg" alt="decalsheet_manager" width="328" height="127"/>
</p>

<h3>DecalSheetManager</h3>
<p>The <b>DecalSheetManager</b> (located in the <tt>camo.core.managers</tt> package) is the manager for the decal system. It handles the xml that defines a list of DecalSheet images and coordinates for cutting out each Decal. It also stores a collection of DecalSheets to make createing complex Decal look up tables easier to manage. You can configure DecalSheets and Decals on the DecalSheetManager at run time or with XML. Once this data is set, the DecalSheetManager goes out and gets all the images it needs for the DecalSheet images. Lets look at how to configure a DecalSheetManager with XML:</p>

<h4>Sample DecalSheet XML</h4>

<textarea style="overflow: auto; padding: 10px; width:90%; height: 220px;" > 
<decalsheet>
	<sheets baseURL="images/">
		<sheet name="buttons" preload="true" w="550" h="126" src="buttons.gif"/>
		<sheet name="button_skin_2" preload="true" w="550" h="126" src="button_skin_1.gif"/>
		<sheet name="button_skin_3" preload="true" w="550" h="126" src="button_skin_2.gif"/>
	</sheets>
	<decals>
		<decal name="up" sheet="buttons" x="1" y="1" w="100" h="41"/>
		<decal name="over" sheet="buttons" x="1" y="43" w="100" h="41"/>
		<decal name="down" sheet="buttons" x="1" y = "85" w="100" h="41"/>
	</decals>
</decalsheet>
</textarea>

<p>The above DecalSheet XML is broken up into two main nodes, one for Sheets (DecalSheets) and the other for Decals. Each Sheet node contains an name (unique reference name), preload (true or false), w (width) and h (height) attributes along with the src representing the path to file.  You can add as many sheets as your application requires. Remember to only flag the critical ones for preloading to cut down on load time. The decals node defines how each decal should be cut out. A decal node has an name (unique name for lookups), sheet (name of the DecalSheet where Decal will be cut out from <a href="#footnote_1"><sup>1</sup></a>), x, y, w, and h.</p>

<p>To use this XML, simply call the DecalSheetManager's <tt>parseXML</tt> method. Once xml is parsed, the DecalSheet requests a list of all the sheet nodes flagged to be preloaded and begins loading the src images. The baseURL attribute, located in the sheets node, is added to the url of each page's src when making the load request. You can leave this empty and point each src directly to an absolute url if your images are not located in the same directory.</p>

<p>The DecalSheetManager makes use of a special loader class called the <b>BitmapLoaderManager</b> (located in the <tt>camo.core.managers</tt> package). Once the images are loaded, the DecalSheetManager is ready to be used. If a page is not flagged to be preloaded but is requested, it will be added to the load queue. Decals can still be requested before the DecalSheet images are fully loaded. The DecalSheetManager will use a Decal's width and hight to generate a proxy graphic (a temporary black placeholder graphic) that will be replaced once the corresponding DecalSheet has been loaded. The DecalSheetManager also makes use of the LoaderManagerEvent to dispatch updates on preload and regular loading progress. You can listen for preload next (<tt>LoaderManagerEvent.PRELOAD_NEXT</tt>), preload done (<tt>LoaderManagerEvent.PRELOAD_DONE</tt>), and load complete (<tt>LoaderManagerEvent.COMPLETE</tt>). You can use this to display load status as well as monitor the progress of preloading/loading of DecalSheet source images.</p>

<h3>DecalSheet</h3>
<p>Loaded images get stored inside of a Dictionary within the DecalSheetManager as individual <b>DecalSheets</b>. Each sheet's key come from its name. At any time you can get a Sheet by calling <tt>getSheet</tt> on the DecalSheetManager. The DecalSheet uses the <tt>sample</tt> method for cutting out BitmapData from its source. When you request a sample, you must pass it a name that refers to a Rectangle defining the x, y, width, and height of the area to cut out. DecalSheets can be configured at run time without XML since a DecalSheet extends the Bitmap Class. Simply pass it a bitmap to use as the source image and use <tt>registerDecal</tt> on the DecalSheet to configure it at run time. Using a DecalSheetManager simplifies the process but DecalSheets and Decals can be used on their own whenever needed. Here is a diagram to illustrate the process:</p>

<p align="center">
<img src="images/register_get_decal.jpg" alt="register_get_decal" width="380" height="165"/>
</p>

<h3>Decal</h3>
<p>A <b>Decal</b> is a Bitmap that contains a reference to the DecalSheet it was cut out from. Now that you have seen how we get xml data into the DecalSheetManager, lets talk about how to retrieve Decal instances. When you call <tt>getDecal</tt> on the DecalSheetManager or DecalSheet, you need to supply the name of a Decal. You can check if a Decal exists by looking through a DecalSheet's <tt>decalName</tt> Array. Once a Decal is requested, the Decal's name gets passed to the parent DecalSheet through the <tt>sample</tt> method and the Decal's BitmapData is returned inside of a new Decal Instance.</p>

<p>Since all Decals contain a reference to the DecalSheet it was cut out from, this connection allows the Decal to receive updates from its parent DecalSheet. You can change a DecalSheet's BitmapData at any time just as you would any other Bitamp instance. Decals listen for <tt>Event.CHANGE</tt> events from their parent Sheet and once an event is received, it resamples the DecalSheet and updates its own BitmapData <a href="#footnote_2"><sup>2</sup></a>. Imagine being able to reskin an entire application by changing the BitmapData in a single DecalSheet? Here is a diagram to illustrate how this works:</p>

<p align="center">
<img src="images/decalsheet_event_system.jpg" alt="decalsheet_event_system" width="263" height="131"/>
<br/>
<small>Changing the BitmapData of a DecalSheet will fire a CHANGE event telling all children Decals to update.</small>
</p>

<h3>DecalSheet Demo</h3>
<p>The following demo illustrates how a DecalSheet is displayed, including Decals defined on the Sheet, a quick demo of skinning a SimpleButton with Decals, as well as the ability to change the BitmapData of the DecalSheet with a new skin.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		id="ARcPod" width="540" height="320"
		codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
		<param name="movie" value="swfs/FlashCamoDemo_2_2_0_r1.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#ffffff" />
		<param name="flashvars" value="mode=decalsheet" />
		<param name="allowScriptAccess" value="sameDomain" />
		<embed src="swfs/FlashCamoDemo_2_2_0_r1.swf" quality="high" bgcolor="#ffffff"
			width="540" height="320" name="FlashCamoDemo_2_2_0_r1" align="middle"
			play="true"
			loop="false"
			quality="high"
			allowScriptAccess="sameDomain"
			type="application/x-shockwave-flash"
			flashvars="mode=decalsheet"
			pluginspage="http://www.adobe.com/go/getflashplayer">
		</embed>
</object>

<p>With Flash Camouflage's DecalSheet system, you can reduce your applications memory footprint by consolidating smaller images into larger sheets. Any graphic you would embed in a class or place in a FLA's library can be stored in a single DecalSheet or be spread over multiple Sheets depending on your needs<a href="#footnote_3"><sup>3</sup></a>. Since DecalSheets can be set up to only load when requested, you can load in application graphics exactly when you need them; cutting down the initial startup and load time.</p>

<h2>Camo's CSS Parser</h2>

<p>Camo's custom CSS parser, the <b>CamoPropertySheet</b> (found inside of the <tt>camo.core.property</tt> package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly. The goal of the CamoPropertySheet is to make styles something you can apply to any of your classes instead of just TextFields. CSS is a great way to define your class's properties in an external file and Camo helps convert these css styles into property/value pairs you can apply to any Object.</p>

<p>Here is a simple CSS sheet:</p>

<h4>Example CSS</h4>

<pre>
/* This is a comment in the CSS file */
baseStyle {
	x: 10px;
	y: 10px;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 10px;
}

baseStyle .Button{
	x: 0px;
	y: 0px;
	background-color: #000000;
}

#playButton {
	background-color: #FFFFFF;
 	background-image: url('/images/full_screen_background.jpg');
}

#fullScreenButton{
	background-color: #FF0000;
	background-image: url('/images/full_screen_background.jpg');
}

#playButton:over {
	background-color: #333333;
}

interactive {
	cursor: hand;
}
</pre>

<h3>Parsing CSS</h3>
<p>Once you have CSS that is ready to be parsed, either by loading it in from a URLLoader as text or by creating it as a string in your code at run time, you will need to call the CamoPropertySheet's <tt>parseCSS</tt> method. This method has one parameter, <tt>compressCSS</tt>. By default this is set to true. The parser requires your CSS to be properly formatted by removing all unneeded spaces, tabs, returns, px, and comments. There are two ways of doing this, you can use server side compression or let the CamoPropertySheet handle the compression for you. Here is what the compressed css would look like:</p>

<h4>Compressed CSS</h4>

<textarea style="overflow: auto; padding: 10px; width:90%; height: 100px;" >  
baseStyle{x:10;y:10;width:100;height:100;padding:5;margin:10;}baseStyle .Button{x:0;y:0;background-color:#000000;}#playButton{background-color:#FFFFFF;background-image:url('/images/full_screen_background.jpg');}#fullScreenButton{background-color:#FF0000;background-image:url('/images/full_screen_background.jpg');}#playButton:over{background-color:#333333;}interactive{cursor:hand;}
</textarea> 

<p>Once the CSS is parsed, you can retrieve an Array of selector names by calling the <tt>selectedNames</tt> getter. A selector represents the name of the particular CSS style and it's collection of values. The <tt>getSelector</tt> method will return the selector <a href="#footnote_4"><sup>4</sup></a> and it's properties as a <b>PropertySelector</b> <a href="#footnote_5"><sup>5</sup></a>. New selectors can be added to the CamoPropertySheet by calling <tt>newSelector</tt> and passing a selector name and a PropertySelector instance. Finally, you can duplicate a CamoPropertySheet by calling the <tt>clone</tt> method <a href="#footnote_6"><sup>6</sup></a>.<p>

<h3>Inheritance</h3>
<p>Selector inheritance is also supported by the CamoPropertySheet. From the previous CSS sample, lets look at the <tt>.Button</tt> style. As you can see the selector name in the CSS is <tt>"baseButton .Button"</tt>. Its formatting tells the parser that <tt>.Button</tt> inherits properties from <tt>baseButton</tt>. We refer to <tt>.Button</tt> as the subject and <tt>baseButton</tt> would be an ancestor element. If you were to call <tt>getSelector</tt> for <tt>.Button</tt> the parser will automatically return a PropertySelector with merged properties from <tt>baseButton</tt> and <tt>.Button</tt>. Any conflicting properties will be overridden by the subject style. Here is what the <tt>.Button</tt> object would look like:</p>


<h4>.BaseButton as an Object</h4>
<pre>
{
	selectorName: .BaseButton,
	x: 0,
	y: 0,
	width: 100,
	height: 100,
	padding: 5,
	margin: 10,
	backgroundColor: #000000;
}
</pre>

<p>PropertySelectors created by the CSS parser have a reference to their selector name in the <tt>selctorName</tt> property. Also, it's important to note that in this example the x and y values from <tt>.BaseButton</tt> overrode the ancestor's values. In this case they are 0 and not 10 as defined in the baseStyle.</p>


<h3>Class and ID Selectors</h3>

<p>Class (.class) and ID (#id) selectors are supported by the CamoPropertySheet. There is no difference to the CSS parser between Classes, IDs, or regular selectors so when making a selector request it's important to understand how to join them. In CSS, the inheritance rules dictate that a Base Styles is overridden by a Class Style that in turn is overridden by the ID Style. You can simulate this by passing in multiple selector names when calling the <tt>getSelector</tt> method. If we wanted to create a "play" button style that inherits the default Button class style and the base interactive style we would call <tt>getSelector</tt> and pass in <tt>"interactive",".BaseButton","#playButton"</tt> using commas to separate each style name. By combining the names of each selector by lowest priority to highest priority the <tt>getSelector</tt> method will automatically parse out each selector and merge them into a single PropertySelector. The last selector name becomes the PropertySelector's selectorName value.</p>

<h3>Pseudo-Selectors</h3>
<p>When Pseudo-Selector are requested, their parent style's properties will be added to the returned Object. Adding a colon (selector:pseudo-selector) to any style name will alert the parser that it needs to also inherit properties from the selector name to the left of the colon. In the above CSS example we request <tt>#playButton:over</tt> we will get back the following object:</p>

<h4>#playButton:over as an Object</h4>
<pre>
{
	styleName: #playButton:over,
	backgroundColor: #333333,
 	backgroundImage: url('/images/full_screen_background.jpg')
}
</pre>

<p>In this example the background-color and background-image properties are inherited from the <tt>#playButton</tt> selector but since <tt>#playButton:over</tt> has its own background-color the ancestor's property is overridden.</p>

<p>It is important to keep in mind that there may be a performance hit when parsing large CSS files with lots of inherited selectors. Also, the compression used when parsing the CSS uses a complex RegEx pattern so it is better to do the compression on the server side instead of during run time. Outside of this limitation, the real power of the CSS parser comes into play when applying PropertySelectors to CamoDisplay classes.</p>

<h3>CamoPropertySheet Demo</h3>
<p>The following demo illustrates how CSS text is parsed by allowing you to write your own css, valid selectors we become buttons under the Current Selectors area and you can preview selector inheritance in the Get Selector input field.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		id="ARcPod" width="540" height="550"
		codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
		<param name="movie" value="swfs/FlashCamoDemo_2_2_0_r1.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#ffffff" />
		<param name="flashvars" value="mode=propertysheet" />
		<param name="allowScriptAccess" value="sameDomain" />
		<embed src="swfs/FlashCamoDemo_2_2_0_r1.swf" quality="high" bgcolor="#ffffff"
			width="545" height="550" name="FlashCamoDemo_2_2_0_r1" align="middle"
			play="true"
			loop="false"
			quality="high"
			allowScriptAccess="sameDomain"
			type="application/x-shockwave-flash"
			flashvars="mode=propertysheet"
			pluginspage="http://www.adobe.com/go/getflashplayer">
		</embed>
</object>

<h2>CamoDisplay</h2>
<p>The CamoDisplay is the final building block of the framework and a powerful alternative to the native Sprite class. Before getting into the CamoDisplay we should take some time to talk about the AbstractDisplay and the BoxModelDisplay.</p>

<h3>AbstractDisplay</h3>

<p>The AbstractDisplay handles the foundation for the <b>BoxModel</b> and <b>CamoDisplay</b> classes. Not only does it make public two methods, <tt>move</tt> and <tt>resize</tt>, but it also handles redraw and visual invalidation to optimize the graphic redraw for the display classes of the framework. The most important feature of the AbstractDisplay however is what happens when we call <tt>addChild</tt> and <tt>removeChild</tt>. The AbstractDisplay automatically creates a container called "display" that gets added as the first child to the display list. Every time another DisplayObject is added to an AbstractDisplay, it gets attached onto the class's display instance. All the display list methods are mapped over to the internal display Sprite. Here is a chart to illustrate the inheritance of Camo's display classes:</p>

<p align="center">
<img src="images/display_inheritance_r2.jpg" alt="display_inheritance" width="520" height="231"/>
</p>

<h3>BoxModelDisplay</h3>
<p>The <b>BoxModelDisplay</b> allows us to apply Margin, Padding, Border and a Background (Color/Image). The BoxModelDisplay manages the offset of the display sprite based on those properties. Lets take a look at how the Box Model gets rendered:</p>

<p align="center">
<img src="images/box_model.jpg" alt="box_model" width="328" height="258"/>
</p>

<p>Camo's Box Model consists of a Margin, Border and Padding wrapped around a display.</p>

<p>Here is a list of supported properties of BoxModel:</p>
<p><small>
<table>
<tr valign="top">
<th width="30%">CSS Property</td>
<th width="30%">Values</td>
<th width="40%">Example (px is stripped out by the parser)</td>
</tr>

<tr valign="top">		
<td>background-alpha</td>
<td>"number range 0 - 1"</td>
<td>Example: background-alpha: .8;</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>background-color</td>
<td>valid hex color</td>
<td>background-color: 0xff0000; sets background red.
background-color: #ff0000; sets background red.</td>
 </tr> 

<tr valign="top">		
<td>background-image</td>
<td>type filename
jpg, png, or gif</td>
<td>background-image: url (/imgs/sample_image.jpg); Will load in sample_image.jpg and redraw Box Model once loaded.</td>
</tr>
<tr valign="top" style="background-color:#e6e6e6;">		
<td>background-position</td>
<td>value for x y</td>
<td>background-position: 10px 30px; This only works if background-repeat is set to no-repeat.</td>
</tr>
<tr valign="top">		
<td>background-repeat</td>
<td>"repeat no-repeat repeat-x repeat-y"</td>
<td>background-repeat: no-repeat; does not repeat the background image, can be used with background-position to move the image's x,y position.
background-repeat: repeat-x: Repeats the background image along its x value based on the height of the background image.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">	
<td>background-scale9 </td>
<td>value for
x, y, width, height</td>
<td>background-scale9: 1px 1px 98px 48px; applies a scale9Grid to the background image.</td>
</tr>

<tr valign="top">		
<td>border<br/>
or<br/>
border-top<br/>
border-right<br/>
border-bottom<br/>
border-left </td>
<td>value for 
size style color alpha</td>
<td>border: 1px solid #ff0000 .5; solid is the only style supported currently.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">	
<td>border-alpha</td>
<td>"value range 0 - 1"	border-alpha: .5;</td>
<td>height	value	height: 50px;</td>
</tr>

<tr valign="top">		
<td>margin<br/>
or<br/>
margin-top<br/>
margin-right<br/>
margin-bottom<br/>
margin-left</td>
<td>value for
top, right, bottom, left</td>
<td>margin: 5px 2px 2px 5px; applies values to top, right, bottom,left
margin: 5px 2px; applies 5 to top & bottom, 2 to right & left
margin: 10px; applies 10 to top, right, bottom, left. <small><em>**Margin is not rendered, you must check its value when performing layouts with BoxMode/CamoDisplays**</em></small></td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>padding<br/>
or<br/>
padding-top<br/>
padding-right<br/>
padding-bottom<br/>
padding-left</td>
<td>value for 
top, right, bottom, left</td>
<td>padding: 5px 2px 2px 5px; applies values to top, right, bottom,left
padding: 5px 2px; applies 5 to top & bottom, 2 to right & left
padding: 10px; applies 10 to top, right, bottom, left</td>
<tr valign="top">
                      
<tr valign="top">
<td>width</td>
<td>value</td>
<td>width: 100px;</td>
</tr>
</table>
</small></p>

<h3>BoxModel Background</h3>

<p>A BoxModelDisplay's background-color and background-image work exactly to how it would in HTML. The background-color is the bottom most color behind the display. It is important to realize that the CSS width and height affect how the background fill will take place. If you do not define the width and height of the BoxModel, it will use the values from the display. The background-image gets composited on top of the background-color. The background-image property lets the box model know how to load in a source image <a href="#footnote_7"><sup>7</sup></a>.  Background-images also have repeat rules: repeat (is default), no-repeat, repeat-x, repeat-y. When using no-repeat you can specify a background image's position (x, y) to offset the image. This is helpful when you only want a background-image to be displayed at a certain location behind the display.</p>

<p align="center">
<img src="images/bg_repeat.jpg" alt="bg_repeat" width="341" height="95"/>
</p>

<p>When the BoxModelDisplay does a refresh <a href="#footnote_8"><sup>8</sup></a>, all of its values are reviewed and drawn to the graphic's layer of the BoxModelDisplay. This insures that the border, background-color, and background-image are a single Bitmap to save on memory. The display Sprite (where all children get added to) is offset by the top and left Padding, and Border <a href="#footnote_9"><sup>9</sup></a>. Once the refresh is complete the display will be correctly positioned. Padding is invisible unless you have set a background color or image. In that case, the background will show through in the area offset by the padding. When you request the width or height of a BoxModelDisplay the dimensions are returned taking into account the padding, border and display. The BoxModelDisplay can be used on its own but when combined with the CamoDisplay, you get additional css style support.</p>

<h3>CamoDisplay</h3>

<p>The <b>CamoDisplay</b> inherits some powerful layout logic from the BoxModelDisplay and introduces the <tt>applyProperties</tt> method. By passing a PropertySelector (obtained from a CamoStyleSheet) the CamoDisplay will attempt to apply the PropertySelector's values <a href="#footnote_10"><sup>10</sup></a>. This takes advantage of the <b>PropertyApplierUtil</b> and <b>TypeHelperUtility</b> that is part of the <b>Property Managment System</b> in Camo.<p>
 
<p>Here is a list of the properties supported by the CamoDisplay:</p>
<p><small>
<table>
<tr valign="top">
<th width="20%">CSS Property</td>
<th width="30%">Values</td>
<th width="50%">Example (px is stripped out by the parser)</td>
</tr>

<tr valign="top">
<td>align</td>
<td>"left (default) center right"</td>
<td>align: left; the logic for this should be in another Class that extends the CamoDisplay or add's the CamoDisplay to its display list.</td>
 </tr>
<tr valign="top" style="background-color:#e6e6e6;">
<td>alpha</td>
<td>"value range 0 - 1"</td>
<td>alpha: .5; sets the alpha to 50%;</td>
</tr>
<tr valign="top">
<td>cursor </td>
<td>"hand pointer none"</td>
<td>cursor: pointer; this is a read only property. The actual logic to manage the cursor should be done in a class that extends the CamoDisplay.</td>
</tr>
<tr valign="top" style="background-color:#e6e6e6;">
<td>overflow</td>
<td>"visible(default) hidden"</td>
<td>overflow: visible; any graphics outside of the display's css width and height will be displayed.
overflow: hidden; the display is masked off based on the style's width and height. If no width and height is set in the style the mask not work correctly.</td>
</tr>
<tr valign="top">
<td>rotation </td>
<td>number value</td>
<td>rotation:180; sets the rotation to 180.</td>
</tr>
<tr valign="top" style="background-color:#e6e6e6;">
<td>scale9Grid</td>
<td>"values for x y width height"</td>
<td>scale9Grid: 1px 1px 98px 48px; applies a rectangle to the CamoDisplay's scale9Grid property.</td>
</tr>
<tr valign="top">
<td>vertical-align</td>
<td>"top (default) middle bottom"</td>
<td>vertical-align: top; the logic for this should be in another Class that extends the CamoDisplay or adds the CamoDisplay to its display list.</td>
</tr>
<tr valign="top" style="background-color:#e6e6e6;">
<td>visibility</td>
<td>"visible(default) hidden"</td>
<td>visibility: hidden; sets visible to false;</td>
</tr>
<tr valign="top">
<td>x</td>
<td>number value</td>
<td>x: 10px; sets the x position to 10;</td>
</tr>
<tr valign="top" style="background-color:#e6e6e6;">
<td>y</td>
<td>number value</td>
<td>y: 10px; sets the y position to 10;</td>
</tr>
<tr valign="top">
<td>z-index	</td>
<td>number value</td>
<td>z-index: 5; This is supported in the CamoDisplay addChild is called.</td>
</tr>
</table>
</small></p>

<p>The most important functionality added by the CamoDisplay is the <tt>rasterize</tt> method. Just like the BoxModelDisplay which draws its border, background-color, and background-image to the graphics layer, the CamoDisplay can do the same thing with its display Sprite. When you call rasterize, a Bitmap snapshot of the display is take, the old display is removed and a new one is put in its place with the previous display's BitmapData drawn to it's graphics layer. All the children that were attached to the display are removed (so the Garbage Collector can release them from memory) and you are left with a flattened display.</p>

<p>It is important to note that rasterize can only be called only once since all children in the display are removed. The speed and memory benefits can greatly increase the performance of your application. This also allows you to layer images in the display Sprite and then flatten them into a single image. Rasterize should be used on any CamoDisplay where its children will never be changed or used outside of the initial setup of the class. It is also an excellent technique to use when animating text.</p>

<h3>CamoDisplay/BoxModel Demo</h3>
<p>The following demo illustrates all of the properties of the BoxModel.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		id="ARcPod" width="540" height="420"
		codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
		<param name="movie" value="swfs/FlashCamoDemo_2_2_0_r1.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#ffffff" />
		<param name="flashvars" value="mode=boxmodel" />
		<param name="allowScriptAccess" value="sameDomain" />
		<embed src="swfs/FlashCamoDemo_2_2_0_r1.swf" quality="high" bgcolor="#ffffff"
			width="545" height="420" name="FlashCamoDemo_2_2_0_r1" align="middle"
			play="true"
			loop="false"
			quality="high"
			allowScriptAccess="sameDomain"
			type="application/x-shockwave-flash"
			flashvars="mode=boxmodel"
			pluginspage="http://www.adobe.com/go/getflashplayer">
		</embed>
</object>

<h3>TypeHelperUtil</h3>
<p>Although the <b>TypeHelperUtil</b> (located in the <tt>camo.core.utils</tt>) does not belong to any one system in Flash Camo, it is key in converting string values from a PropertySelector into correctly typed data to be applied to your Class. The TypeHelperUtil contains a lookup table of functions to handle conversions of specific data types. Primitives such as Number, Array, and Object are built in. This is used as part of the <tt>applyProperties</tt> method in the CamoDisplay in conjunction with the <b>PropertyApplierUtil</b>. By default the TypeHelperUtil supports the following conversions:</p>

<h4>Built in Type Support</h4>
<p><small>
<table>
<tr valign="top">
<th width="30%">Function Name</td>
<th width="30%">String Data Example</td>
<th width="40%">Description</td>
</tr>
		
<tr valign="top">		
<td>stringToArray</td>
<td>one two three</td>
<td>This will convert any string into an array by splitting the spaces. This is based on CSS rules. You can override the default delimiter by calling the function directly.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>stringToBoolean</td>
<td>true or false</td>
<td>Converts any true or false into a Boolean.</td>
</tr>

<tr valign="top">		
<td>stringToDictionary</td>
<td>prop:value; prop2:value2;
<td>Creates a Dictonary out of a string by splitting all elements by the semi-colen. The results are then split on the colon. Anything on the left of the colon becomes the property and the string to the right become the value.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>stringToNumber</td>
<td>999</td>
<td>Converts any string into a number.</td>
</tr>

<tr valign="top">		
<td>stringToObject</td>
<td>prop:value; prop2:value2;</td>
<td>Similar to how stringToDictonary work except the returned value is an Object.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>stringToPoint</td>
<td>10 10</td>
<td>Creates a Point instance from a string using the space as a delimiter.</td>
</tr>

<tr valign="top">		
<td>stringToRectangle</td>
<td>10 10 100 100</td>
<td>Creates a Rectangle instance from a string using the space as a delimiter.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">	
<td>stringToStyleSheet</td>
<td>style1{color: #ffffff}</td>
<td>Creates a StyleSheet from any string by taking advantage of the parseCSS method on Flash default StyleSheetClass.</td>
</tr>

<tr valign="top">		
<td>stringToUint</td>
<td>0 or #000000 or 0x000000 or black</td>
<td>This will convert any string into a uint. It is primarily used to converts colors into uints. Color shortcuts are supported as well as CSS Style hex values.</td>
</tr>

<tr valign="top" style="background-color:#e6e6e6;">		
<td>stringToUrlRequest</td>
<td>url('path/to/anything')</td>
<td>Converts any string into a URLRequest. This method only uses the string inside of the url(''); Likewise you can leave the quotes out or use double quotes.</td>
</tr>
</table>
</small>
</p>

<p>The TypeHelperUtil also supports color shortcuts when converting colors into uints. Here is a list of supported colors and their values:</p>



<h4>Color Support</h4>
<p>
<small>
<table styel="border-spacing:10px;" cellpadding="2">
<tr valign="top">
<th width="11%">Color</th>
<th width="11%">Preview</th>
<th width="11%">Value</th>
<th width="11%">Color</th>
<th width="11%">Preview</th>
<th width="11%">Value</th>
<th width="11%">Color</th>
<th width="11%">Preview</th>
<th width="11%">Value</th>
</tr>
<tr valign="top">
<td>black</td>
<td style="background-color:#000000"></td>
<td>&nbsp;0x000000</td>
<td>olive</td>
<td style="background-color:#808000"></td>
<td>&nbsp;0x808000</td>
<td>purple</td>
<td style="background-color:#800080"></td>
<td>&nbsp;0x800080</td>
</tr>
<tr valign="top">
<td>blue</td>
<td style="background-color:#0000FF"></td>
<td>&nbsp;0x0000FF</td>
<td>white</td>
<td style="background-color:#FFFFFF"></td>
<td>&nbsp;0xFFFFFF</td>
<td>teal</td>
<td style="background-color:#008080"></td>
<td>&nbsp;0x008080</td>
</tr>
<tr valign="top">
<td>green</td>
<td style="background-color:#008000"></td>
<td>&nbsp;0x008000</td>
<td>yellow</td>
<td style="background-color:#FFFF00"></td>
<td>&nbsp;0xFFFF00</td>
<td>fuchsia</td>
<td style="background-color:#FF00FF"></td>
<td>&nbsp;0xFF00FF</td>
</tr>
<tr valign="top">
<td>gray</td>
<td style="background-color:#808080"></td>
<td>&nbsp;0x808080</td>
<td>maroon</td>
<td style="background-color:#800000"></td>
<td>&nbsp;0x800000</td>
<td>aqua</td>
<td style="background-color:#00FFFF"></td>
<td>&nbsp;0x00FFFF</td>
</tr>
<tr valign="top">
<td>silver</td>
<td style="background-color:#C0C0C0"></td>
<td>&nbsp;0xC0C0C0</td>
<td>navy</td>
<td style="background-color:#000080"></td>
<td>&nbsp;0x000080</td>
<td>magenta</td>
<td style="background-color:#FF00FF"></td>
<td>&nbsp;0xFF00FF</td>
</tr>
<tr valign="top">
<td>lime</td>
<td style="background-color:#00FF00"></td>
<td>&nbsp;0x00FF00</td>
<td>red</td>
<td style="background-color:#FF0000"></td>
<td>&nbsp;0xFF0000</td>
<td>cyan</td>
<td style="background-color:#00FFFF"></td>
<td>&nbsp;0x00FFFF</td>
</tr>
</table>
</small>
</p>
<p>In addition to the built in string conversion methods you can register your own. The TypeHelperUtil has two methods for extending the functionality of the utility called <tt>registerFunction</tt> and <tt>removeFunction</tt>. You can also customize and extend the built in color support through the <tt>registerColor</tt> and <tt>removeColor</tt> as well. This allows you to add your own conversion based on your projects needs.</p>

<p>If you want to add your conversion functions you need to use the class's qualified name as the key. As an example to correctly convert a Point from a string, you would register your conversion function to <tt>flash.geom::point</tt> and not to a reference of the Point class itself. It is recommended that you register all custom functions in your doc class before you application gets started. If you are dynamically adding conversion functions that are specific to a particular section you should remove all unused function since they will not allow the Garbage Collector to remove your classes properly.</p>

<h2>The End</h2>
<p>This covers a very in depth introduction to the Flash Camouflauge Framework. Like any framework there is a learning curve but hopefully these examples have shed a little light onto the mechanics going on behind the scenes. As always I am happy to answer any questions you may have by leaving a comment. Also, if you come across any bugs feel free to add it the the <a href="http://code.google.com/p/flash-camouflage/issues/list" target="_blank">issues list</a> on Google Code.</p>

<small>
<b>Footnotes:</b>
<p><a name="footnote_1">1</a> The framework handles looking up sheets by name so it should refer to the sheet's name defined in the xml. Sheet names should be unique to avoid conflicts.</p>

<p><a name="footnote_2">2</a> The Decal's detach method will remove the connection to its parent DecalSheet.</p>

<p><a name="footnote_3">3</a> When it comes to designing your decal sheets, you should group images that do not have transparency into single jpg or gif image. Images with transparency should be grouped together as pngs. Since pngs are larger, it helps to break these sheets up as small as possible in the order of importance. This will help cut down on load times and optimize the streaming in of your Sheets.</p>

<p><a name="footnote_4">4</a> Multiple selector names can be passed into the getSelectors method. Simple separate selector names by commas. All of the selectors will be merged into a single PropertySelector instance based on the order they are supplied. The first selector would be the base and the following one would override any of the previous selectors values. See Classes and ID Selector section fro more information.</p>

<p><a name="footnote_5">5</a> It's important to note that properties on PropertySelectors are strings. If you have numbers such as x or width in the CSS style they will have to be converted into numbers; this is discussed more the CamoDisplay section.</p>

<p><a name="footnote_6">6</a> By default, calling clone() on a CamoPropertySheet will copy all of the styles in the StylesSheet but what if you only want to clone a few styles? You can pass in specific style names separated by a comma to be included in the duplicated PropertySheet.</p>

<p><a name="footnote_7">7</a> The BoxModelDisplay supports jpg, png, or gif background images.</p>

<p><a name="footnote_8">8</a> Calling the refresh method on a BoxModelDisplay is considered expensive and should only be used when needed.</p>

<p><a name="footnote_9">9</a> Margin is not accounted for in offset of the display sprite unlike Padding. Instead Margin is a value accessible through the margin property and should be used by classes that layout or align BoxModelDeisplays.</p>

<p><a name="footnote_10">10</a> Since PropertySelector values are strings, the PropertyApplyerUtil will attempt to use the source instance to determine what type each property should be converted to. The PropertyApplyerUtil supports String, Number, UINT, Point, URLRequest, StyleSheet, and Rectangle. See the TypeHelperUtil section for ways to added additional conversion logic.</p>
</small>